<template>
  <!-- form表单 -->
  <el-form label-width="120px">
    <!-- 输入框 -->
    <el-form-item label="SPU名称">
      <el-input
        placeholder="请输入SPU名称"
        v-model="spuParams.spuName"
      ></el-input>
    </el-form-item>
    <!-- 下拉框 -->
    <el-form-item label="SPU品牌">
      <el-select title="SPU品牌" v-model="spuParams.tmId">
        <el-option
          v-for="(trandemark, index) in tradeMarkArr"
          :key="trandemark.id"
          :label="trandemark.tmName"
          :value="trandemark.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <!-- 文本域 -->
    <el-form-item label="SPU描述">
      <el-input
        type="textarea"
        placeholder="SPU描述"
        v-model="spuParams.description"
      ></el-input>
    </el-form-item>
    <!-- 图片上传 -->
    <el-form-item label="SPU图片">
      <el-upload
        v-model:file-list="imgArr"
        action="/app-dev/admin/product/fileUpload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-upload="handlerUpload"
      >
        <el-icon><UploadFilled /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible" class="dialogs">
        <img
          w-full
          :src="dialogImageUrl"
          alt="Preview Image"
          style="width: 200px; display: block; margin: 20px auto"
        />
      </el-dialog>
    </el-form-item>
    <!-- 下拉框 +按钮-->
    <el-form-item label="SPU销售属性">
      <el-select v-model="saleIdAndValue">
        <el-option
          v-for="(item, index) in unHsSaleAttr"
          :label="item.name"
          :key="item.id"
          :value="`${item.id}:${item.name}`"
        >
        </el-option>
      </el-select>
      <el-button
        @click="addSaleAttr"
        :disabled="saleIdAndValue ? false : true"
        type="primary"
        size="default"
        style="margin-left: 10px"
        :icon="Plus"
        >添加销售属性</el-button
      >
      <el-table border style="margin: 10px 0px" :data="saleArr" >
        <el-table-column label="序号" type="index" width="80px" align="center" >
        </el-table-column>
        <el-table-column label="属性名" width="100px" prop="saleAttrName">
        </el-table-column>
        <el-table-column label="属性值">
          <template #="{ row, $index }">
            <el-tag
              hit
              @close="close(index, row)"
              v-for="(item, index) in row.spuSaleAttrValueList"
              :key="item.id"
              closable
              type="success"
              style="margin: 0px 5px"
            >
              {{ item.saleAttrValueName }}
            </el-tag>
            <el-input
              v-if="row.showInput"
              @blur="toLook(row)"
              v-model="row.saleAttrValueName"
              placeholder="请输入你的属性值"
              size="small"
              style="width: 100px"
              :ref="(el) => (inputArr[$index] = el)"
            ></el-input>
            <el-button
              v-else
              type="primary"
              size="small"
              @click="toEdit(row, $index)"
              :icon="Plus"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template #="{ row, $index }">
            <el-button
              type="danger"
              :icon="Delete"
              size="small"
              @click="saleArr.splice($index, 1)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <!-- 底部的按钮 -->
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="canel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
// 获取到vue的ref对象
import { ref, reactive, computed, nextTick } from "vue";
// 导入element提示信息
import { ElMessage } from "element-plus";
// 导入icon的组件
import { Plus, UploadFilled, Delete } from "@element-plus/icons-vue";
// 导入请求
import {
  reqSkuImageList,
  reqSpuBaseAttrList,
  reqSpuSaleAttr,
  reqAllTradeMark,
  reqAddOrUpdateSpu,
} from "@/api/product/spu/index";
// 创建图片的ref对象
// 存储全部的品牌
const tradeMarkArr = ref<any>([]);
// 存储全部的品牌图片
const imgArr = ref<any>([]);
// 存储已有的销售属性
const saleArr = ref<any>([]);
// 存储全部的销售的属性
const allSaleArr = ref<any>([]);
// 定义一个响应式数据 存一下原始的初始化的数据,为空的数据
const spuParams = reactive<any>({
  // 三级分类id
  category3Id: "",
  // spu的名字
  spuName: "",
  //品牌的Id
  tmId: "",
  // spu的描述
  description: "",
  // 里面存储照片墙的数据
  spuImageList: [],
  // 里面存储版本号的信息
  spuSaleAttrList: [],
});
// 控制对话框显示与隐藏
const dialogVisible = ref<any>(false);
// dialog里面图片地址
const dialogImageUrl = ref<any>("");
// 定义响应式数据
const saleIdAndValue = ref<string>("");
// 存储输入框输入的内容
const inputArr = ref<any>([]);
// 发送四个请求
const initHasSpu = async (row: any) => {
  // 解构一下
  Object.assign(spuParams, row);
  // 获取全部品牌
  let result = await reqAllTradeMark();
  // 获取已有的SPU照片墙的数据
  let result1 = await reqSkuImageList(row.id);
  // 获取已有的销售属相与属性值
  const result2 = await reqSpuSaleAttr(row.id);
  // 获取全部的销售属性
  let result3 = await reqSpuBaseAttrList();
  // 存储返回全部品牌的数据
  tradeMarkArr.value = result;
  // 存储返回已有的SPU照片墙的数据
  imgArr.value = result1.map((item: any) => {
    return {
      name: item.imgName,
      url: item.imgUrl,
    };
  });
  // 存储返回已有的销售属性与属性值的数据
  saleArr.value = result2;
  // 存储的式返回
  allSaleArr.value = result3;
};

// 取消按钮的回调函数 返回到主页面
const canel = () => {
  $emits("changeScene", { scene: 0, flag: "update" });
};
// 照片墙预览的照片
const handlePictureCardPreview = (file: any) => {
  // 点击的时候对话框弹出
  dialogVisible.value = true;
  // 存储用户即将
  dialogImageUrl.value = file.url;
};
// 照片墙删除的回调函数:手机剩余的全部的图片
const handleRemove = (file: any, files: any) => {
  // 手机用户删除完毕以后剩余的照片墙的数据
  imgArr.value = files;
};
// 图片上传到的功能
const handleSuccess = (response: any, file: any, files: any) => {
  imgArr.value = files;
};
// 图片上传之前约束文件大小与类型
const handlerUpload = (file: any) => {
  if (
    file.type == "image/png" ||
    file.type == "image/jpeg" ||
    file.type == "image/gif"
  ) {
    if (file.size / 1024 / 1024 < 2) {
      return true;
    } else {
      ElMessage({
        type: "error",
        message: "上传图片大小不能超过2M",
      });
      return false;
    }
  } else {
    ElMessage({
      type: "error",
      message: "上传图片只能是jpg或png格式",
    });
    return false;
  }
};
// 删除的回调函数
const close = (index: number, row: any) => {
  // 属性值数组删除
  row.spuSaleAttrValueList.splice(index, 1);
};
// 计算属性还未拥有的的销售属性
const unHsSaleAttr = computed(() => {
  // 全部的三个属性  颜色 版本 尺码
  // 已有的销售属性 颜色和版本
  return allSaleArr.value.filter((item: any) => {
    return saleArr.value.every((item1: any) => {
      return item.name != item1.saleAttrName;
    });
  });
});
// 添加新的销售属性
const addSaleAttr = () => {
  // 解构
  const [baseSaleAttrId, saleAttrName] = saleIdAndValue.value.split(":");
  // 收集参数
  const newSaleAttr = {
    baseSaleAttrId,
    saleAttrName,
    spuSaleAttrValueList: [],
  };
  // 收集一下新的参数
  saleArr.value.push(newSaleAttr);
  // 收集完毕清空数据
  saleIdAndValue.value = "";
};
// 点击按钮添加的回调函数
const toEdit = (row: any, $index: number) => {
  row.showInput = true;
  row.saleAttrValueName = "";
  nextTick(() => {
    // 收集数据
    inputArr.value[$index].focus();
  });
};
// input的blur变为查看模式
const toLook = (row: any) => {
  // 收集新的参数 进行解构复制
  const { baseSaleAttrId, saleAttrValueName } = row;
  // 判断用户输入的正确不正确
  if (saleAttrValueName.trim() == "") {
    // 提示信息:你输入的内容不符合规范
    ElMessage({
      type: "error",
      message: "属性值不能为空",
    });
    return;
  }
  // 查看属性值有没有重复的
  let repeat = row.spuSaleAttrValueList.find((item: any) => {
    return item.saleAttrValueName == saleAttrValueName;
  });
  // 判断用户输入的信息有没有重复的信息
  if (repeat) {
    ElMessage({
      type: "error",
      message: "属性值不能重复",
    });
    return;
  }
  // 追加新的属性值
  row.spuSaleAttrValueList.push({
    baseSaleAttrId,
    saleAttrValueName,
  });
  // 将show
  row.showInput = false;
};
// 保存信息的回调函数
const save = async () => {
  // 整理照片墙的数据
  spuParams.spuImageList = imgArr.value.map((imgObj: any) => {
    return {
      imgName: imgObj.name,
      imgUrl: (imgObj.response && imgObj.response.data) || imgObj.url,
    };
  });
  // 销售属性
  spuParams.spuSaleAttrList = saleArr.value;
  // 添加一个或者删除一个更新一个用try catch
  try {
    // 添加或者更新的请求
    await reqAddOrUpdateSpu(spuParams);
    // 添加成功或者更新成功的提示信息
    ElMessage({
      type: "success",
      message: spuParams.id ? "更新成功" : "添加成功",
    });
    // 在通知父组件场景的变换为0
    $emits("changeScene", { scene: 0, flag: spuParams.id ? "update" : "add" });
  } catch (error) {
    // 更新失败或者添加失败的提示信息
    ElMessage({
      type: "error",
      message: spuParams.id ? "更新失败" : "添加失败",
    });
  }
};
// 编写第二个请求
const initAddSpu = async (c3Id: string | number) => {
  // 清空第一次发送请求的数据
  reset();
  // 存储三级分类的Id
  spuParams.category3Id = c3Id;
  // 获取全部品牌的数据
  let result = await reqAllTradeMark();
  // 获取全部的销售的属性
  let result1 = await reqSpuBaseAttrList();
  // 存储全部品牌的信息
  tradeMarkArr.value = result;
  // 存储全部的销售属性
  allSaleArr.value = result1;
};
// 组件通信emits
const $emits = defineEmits(["changeScene"]);
// 清空数据
const reset = () => {
  // 清空之前的全部的数据
  Object.assign(spuParams, {
    id: "",
    // 三级分类id
    category3Id: "",
    // spu的名字
    spuName: "",
    tmId: "", //品牌的Id
    // spu的描述
    description: "",
    // 里面存储照片墙的数据
    spuImageList: [],
    // 里面存储版本号的信息
    spuSaleAttrList: [],
  });
  // 照片墙的数据清空
  imgArr.value = [];
  // 销售属相清空
  saleArr.value = [];
};
// 暴露出去四个请求方法
defineExpose({
  initHasSpu,
  initAddSpu,
});
</script>
